<!-- 供需中心nav -->
<template>
    <div class="qiao-nav">
        <div class="cp-container">
            <el-row>
                <el-col
                    v-for="item in navInfo"
                    :key="item.type"
                    :span="sign === item.type ? col : 24 - col"
                    :class="sign === item.type ? 'nav-l' : 'nav-r'"
                    :style="setColStyle(item)"
                >
                    <nuxt-link :to="item.path">
                        {{item.name}}
                    </nuxt-link>
                    <el-button type="text" :loading="item.disabled" :disabled="item.disabled" @click="toJumpUc(item)">
                        {{item.addName}}
                    </el-button>
                    <span class="rt-c"></span>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Component,
    Watch,
    Vue
} from 'nuxt-property-decorator'
import {ciipWebUrl} from '~/../config/server.url.conf'
import {validateUserAuthor} from '~/api'
import ValidateLoginConfirm from '~/method/confirm'

@Component({
    name: 'qiaoNav'
})
export default class QiaoNav extends Vue {
    col: number = 18
    sign: string = 's'
    navInfo: any = {
        s: {
            type: 's',
            path: '/qiao/s',
            name: '服务大厅',
            value: 'SERVICE',
            disabled: true,
            addName: '发布服务'
        },
        d: {
            type: 'd',
            path: '/qiao/d',
            name: '需求大厅',
            value: 'DEMAND',
            disabled: true,
            addName: '发布需求'
        }
    }
    @Watch('$store.state.userNum', {immediate: true, deep: true})
    init (nv: number) {
        if (nv > 0) {
            this.navInfo.s.disabled = false
            this.navInfo.d.disabled = false
        }
    }
    @Watch('$route.path', {immediate: true, deep: true})
    routeChange (nv: string) {
        this.sign = nv.includes(this.navInfo.s.path) ? 's' : 'd'
    }
    setColStyle (item: any) {
        const col: number = this.col
        const position: string = 'relative'
        let left: number | string = 'auto'
        let right: number | string = 'auto'
        if (this.sign === 'd') {
            if (item.type === 's') {
                left = (col / 24) * 100 + '%'
            } else {
                right = ((24 - col) / 24) * 100 + '%'
            }
        }
        return {
            left,
            right,
            position
        }
    }
    async toJumpUc (item: any) {
        this.navInfo[item.type].disabled = true
        const mark = item.value
        const uuid = this.$store.state.token
        const {data}: any = await validateUserAuthor(mark, uuid, item.path)
        if (data.success) {
            window.location.href = ciipWebUrl + item.path + '?t=second'
        } else {
            let msg: string = data.msg
            let url: string = ''
            let btn: string = ''
            switch (data.data) {
                case 'USER_NOT_LOGIN':
                    btn = '立即登录'
                    msg = '您尚未登录，登录即可前往'
                    url = ciipWebUrl + '/login?redirectUrl=' + window.location.href
                    break
                case 'PERSON_REAL_AUTH_NOPASS':
                    btn = '立即前往'
                    msg = '个人用户实名认证未通过'
                    url = ciipWebUrl + '/account/safe'
                    break
                case 'ENTERPRISE_SHOP_NOTOPEN':
                    btn = '立即前往'
                    msg = '企业店铺未开通'
                    url = ciipWebUrl + '/business/shop'
                    break
                case 'ENTERPRISE_REAL_AUTH_NOPASS':
                    btn = '立即前往'
                    msg = '企业认证未通过'
                    url = ciipWebUrl + '/account/authentication'
                    break
                case 'NO_SETTING_AUTH': {
                    const isPerson: boolean = this.$store.state.userinfo.selectRoleType === 'PERSON'
                    btn = isPerson ? '前往创建' : '前往用户中心'
                    url = ciipWebUrl
                    if (isPerson) {
                        msg = '请创建企业账号并开通店铺后再发布服务'
                        url += '/account/addcreatecompany'
                    } else {
                        msg = `您暂时没有${item.addName}的权限，如有疑问，请联系企业管理员`
                    }
                    break
                }
                case 'AUTH_SUCCESS':
                    btn = '立即前往'
                    msg = '是否继续前往访问'
                    url = ciipWebUrl + item.path + '?t=second'
                    break
            }
            this.validateLoginConfirm(msg, btn, url)
        }
        this.navInfo[item.type].disabled = false
    }
    validateLoginConfirm (msg: string, confirmButtonText: string, url: string) {
        const confirm = new ValidateLoginConfirm({that: this})
        confirm.validateLoginConfirmForParams(msg, confirmButtonText, url)
    }
}
</script>

<style lang="scss" scoped>
    .qiao-nav{
        padding-top: 20px;
        .cp-container{
            height: 52px;
            background-color: #f9f9f9;
            .el-col{
                box-sizing: border-box;
                padding: 16px 32px;
                line-height: 20px;
                a{
                    font-size: 16px;
                    color: #333;
                    &:hover{
                        color: $blue;
                    }
                }
            }
            .el-button{
                float: right;
                color: #666;
                font-size: 14px;
                padding: {
                    top: 3px;
                    bottom: 3px;
                };
                &:hover{
                    color: $blue;
                }
            }
            .rt-c{
                display: none;
                position: absolute;
                width: 0;
                height: 0;
                top: 0;
                right: 0;
                border: {
                    width: 0 52px 52px 0;
                    color: transparent #e3e3e3 transparent transparent;
                    style: solid;
                };
            }
            .nav-l{
                background-color: #f9f9f9;
                padding-right: 84px;
                a{
                    color: $blue;
                    font-weight: bold;
                }
                .el-button{
                    color: $blue;
                }
                .rt-c{
                    display: block;
                }
            }
            .nav-r{
                background-color: #e3e3e3;
            }
        }
    }
</style>
